<template>
  <div style="height: 100% ; width:100%;">
    <div ref="chart" :style="style"></div>
  </div>

</template>
<script setup lang="ts">
import * as echarts from "echarts";
import {onMounted, reactive, ref, defineProps, computed} from "vue";
import baseService from "../service/baseService";
import {forEach} from "lodash";

const chart = ref();
const {height, width, option, url,type} = defineProps({
  type :{type:String,default:'1'},
  height: {type: String, default: '330px'},
  width: {type: String, default: '100%'},
  option: {
    type: Object,
    default: () => ({
      title: {text: '销量',},
      tooltip: {},
      legend: {},
      color: '#6c6161',
      xAxis: {
        data: [2, 1, 2, 3, 1],
      },
      dataset:{
        source:[],
      },
      yAxis: {
        axisLabel: {
          rotate: 90,
          formatter: '{value}件'
        }
      },
      series: [
        {
          name: "销量",
          type: 'line',//br 显示的是否是柱状图还是其他
          data: [1, 2, 3, 4],//chartServiceData
          label: {
            show: true//数据是否显示
          }
        },
      ],
    })
  },
  url: {type: String, default: null},
});

const style = computed(() => ({
  height, width
}))
let dates=()=>{[]};
onMounted(() => {
  let mychar = echarts.init(chart.value);
  if(null != url){

      baseService.get(url).then((res) => {
        if(type == '1'){
          Object.assign(option?.series,res.data)
          mychar.setOption(option);
        }else{
          Object.assign(option?.dataset.source,res.data)
          let optionsService ={
            "type": "pie",
            "id": "pie",
            "radius": "30%",
            "center": [
              "50%",
              "25%"
            ],
            "emphasis": {
              "focus": "self"
            },
            "label": {
              "formatter": "{@2012} ({d}%)"
            },
            "encode": {
              "itemName": "product",
              "value": "",
              "tooltip": ""
            }
          };
          let optionsLine ={
            "type": "line",
            "smooth": true,
            "seriesLayoutBy": "row",
            label: {
              show:true
            },
            "emphasis": {
              "focus": "series"
            }
          }
           let s= 0;
           let services: any[]=[];
           res.data.forEach((x:object)=>{
              if(s==0){
                services.push(optionsService)
              }else{
                services.push(optionsLine)
              }
              s++;
          })
          Object.assign(option?.series,services)

          mychar.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
              const dimension = xAxisInfo.value + 1;
              mychar.setOption({
                series: {
                  id: 'pie',
                  label: {
                    formatter: '{@[' + dimension + ']} ({d}%)'
                  },
                  encode: {
                    value: dimension,
                    tooltip: dimension
                  }
                }
              });
            }
          });
          mychar.setOption(option);
        }

      });
  }else{
    mychar.setOption(option);
  }


  window.addEventListener('resize', () => {
    mychar.resize();
  })
})
</script>
<style>

.sampleNum_chart {
  width: 100%;
  height: 200px;
}
</style>
